Highcharts ব্যবহার করার সময়, আপনি চার্টের ইভেন্টগুলিকে ট্র্যাক এবং কাস্টমাইজ করতে পারেন। এই ইভেন্টগুলো ব্যবহারকারীর ইন্টারঅ্যাকশন যেমন ক্লিক, হোভার, রিসাইজ ইত্যাদির উপর ভিত্তি করে বিভিন্ন কার্যকলাপ নির্ধারণ করতে সহায়তা করে। Highcharts এ ইভেন্ট হ্যান্ডলার কনফিগার করা খুবই সহজ এবং এতে বিভিন্ন ধরনের ইভেন্ট সমর্থন করা হয়।

নিচে Highcharts এ ইভেন্ট হ্যান্ডলার কনফিগার করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।

1. ক্লিক ইভেন্ট

Highcharts এ ক্লিক ইভেন্টের জন্য click ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়। যখন কোনো ইউজার চার্টের একটি সিরিজ বা পয়েন্টে ক্লিক করবে, তখন আপনি সেই ইভেন্টকে ট্র্যাক করতে পারেন।

• ক্লিক ইভেন্টের উদাহরণ:

  এখানে একটি উদাহরণ দেওয়া হলো, যেখানে চার্টের পয়েন্টে ক্লিক করলে একটি এলার্ট মেসেজ দেখানো হবে:

  Highcharts.chart('container', {
    chart: {
      type: 'column',
      events: {
        click: function(event) {
          alert('Chart clicked at: ' + event.xAxis[0].value + ', ' + event.yAxis[0].value);
        }
      }
    },
    title: {
      text: 'Click on the chart'
    },
    series: [{
      data: [5, 10, 15, 20, 25]
    }]
  });
  

  এখানে, click ইভেন্টটি চার্টের উপর ক্লিক করার সময় ট্রিগার হবে এবং event.xAxis[0].value ও event.yAxis[0].value এর মাধ্যমে ক্লিকের স্থান (এক্স এবং ওয়াই অ্যাক্সিসের মান) পাওয়া যাবে।

2. পয়েন্ট ক্লিক ইভেন্ট

একটি নির্দিষ্ট পয়েন্টে ক্লিক করলে আপনি সেই পয়েন্টের সাথে সম্পর্কিত তথ্য পেতে পারেন। এর জন্য point অবজেক্টে click ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়।

• পয়েন্ট ক্লিক ইভেন্টের উদাহরণ:

  Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Click on the points'
    },
    series: [{
      data: [1, 3, 2, 5, 4],
      point: {
        events: {
          click: function() {
            alert('Point clicked at: ' + this.category + ' with value: ' + this.y);
          }
        }
      }
    }]
  });
  

  এখানে, point.click ইভেন্ট ব্যবহার করা হয়েছে। আপনি যেকোনো পয়েন্টে ক্লিক করলে তার category এবং y ভ্যালু (মান) পেতে পারেন।

3. হোভার ইভেন্ট

চার্টের উপর মাউস হোভার করার সময় আপনি mouseOver ইভেন্ট ব্যবহার করতে পারেন, যা মাউস পয়েন্টার চার্টের একটি সিরিজ বা পয়েন্টের উপর গেলে ট্রিগার হয়।

• হোভার ইভেন্টের উদাহরণ:

  Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Hover over the bars'
    },
    series: [{
      data: [10, 20, 30, 40],
      events: {
        mouseOver: function() {
          alert('Mouse hovered over the bar');
        }
      }
    }]
  });
  

  এই উদাহরণে, যখন আপনি বার চার্টের একটি বারের উপর মাউস পয়েন্টার নিয়ে যাবেন, তখন একটি এলার্ট মেসেজ প্রদর্শিত হবে।

4. রিসাইজ ইভেন্ট

চার্ট রিসাইজ করার সময় resize ইভেন্ট ব্যবহার করা হয়। এটি বিশেষ করে চার্টের সাইজ পরিবর্তন হলে প্রয়োজনীয় অ্যাকশন নেয়ার জন্য ব্যবহৃত হয়।

• রিসাইজ ইভেন্টের উদাহরণ:

  Highcharts.chart('container', {
    chart: {
      type: 'line',
      events: {
        resize: function() {
          alert('Chart resized');
        }
      }
    },
    title: {
      text: 'Resize the chart window'
    },
    series: [{
      data: [1, 2, 3, 4, 5]
    }]
  });
  

  এই উদাহরণে, চার্টের সাইজ পরিবর্তন হলে একটি এলার্ট মেসেজ দেখানো হবে।

5. সিরিজ হাইভার ও ক্লিক ইভেন্ট

আপনি সিরিজের উপর মাউস হোভার বা ক্লিক ইভেন্ট ব্যবহার করে সেই সিরিজের উপর নির্দিষ্ট কাজ করতে পারেন।

• সিরিজ হোভার ও ক্লিক ইভেন্টের উদাহরণ:

  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Hover and Click on Series'
    },
    series: [{
      name: 'Sales',
      data: [10, 20, 30],
      events: {
        mouseOver: function() {
          alert('Hovered over the Sales series');
        },
        click: function() {
          alert('Clicked on the Sales series');
        }
      }
    }]
  });
  

  এই উদাহরণে, যখন আপনি সিরিজের উপর মাউস হোভার করবেন বা ক্লিক করবেন, তখন একটি এলার্ট মেসেজ দেখাবে।

6. Zoom ইভেন্ট

Zoom বা প্যানিং ইভেন্ট Highcharts এ সহজেই কনফিগার করা যায়। এই ইভেন্টটি সাধারণত xAxis এবং yAxis এর পরিবর্তনগুলিকে ট্র্যাক করার জন্য ব্যবহৃত হয়।

• Zoom ইভেন্টের উদাহরণ:

  Highcharts.chart('container', {
    chart: {
      type: 'line',
      zoomType: 'xy', // Enable zoom on both axes
      events: {
        selection: function(event) {
          alert('Zoom event triggered');
        }
      }
    },
    title: {
      text: 'Zoom In/Out on the chart'
    },
    series: [{
      data: [1, 2, 3, 4, 5]
    }]
  });
  

  এখানে, zoomType নির্ধারণ করে কোন অক্ষগুলিতে জুম প্রয়োগ করা হবে, এবং selection ইভেন্ট ব্যবহার করে জুমিংয়ের সময় একটি কাজ সম্পাদিত হবে।

সারাংশ

Highcharts এ ইভেন্ট হ্যান্ডলিং খুবই শক্তিশালী এবং এটি আপনাকে চার্টের বিভিন্ন ইন্টারঅ্যাকশন ট্র্যাক এবং কাস্টমাইজ করার সুযোগ দেয়। আপনি ক্লিক, হোভার, রিসাইজ, Zoom, এবং অন্যান্য ইভেন্ট হ্যান্ডলারের মাধ্যমে ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী অ্যাপ্লিকেশনে বিভিন্ন ফিচার যোগ করতে পারেন। এই ইভেন্টগুলো ব্যবহার করে আপনি চার্টের কাজের গতিশীলতা এবং ইন্টারঅ্যাকটিভনেস বৃদ্ধি করতে পারবেন।